<lv-transfer
  [lvSourceData]="sourceData"
  [lvTargetData]="targetData"
  [lvRenders]="[render, render]"
  [lvFooters]="[null, null]"
></lv-transfer>

<ng-template #render let-data let-belong="belong">
  <lv-datatable
    #lvTable
    [lvData]="data"
    lvCompareWith="key"
    lvSelectionMode="multiple"
    [lvSelection]="selection"
    (lvSelectionChange)="selectionChange($event, belong)"
  >
    <thead>
      <tr>
        <th *ngIf="belong === 'source'" lvShowCheckbox width="64px"></th>
        <th lvCellKey="site">Site</th>
        <th lvCellKey="type">Type</th>
        <th *ngIf="belong === 'target'" lvCellKey="destination">Destination</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let item of lvTable.renderData">
        <tr>
          <td *ngIf="belong === 'source'" lvShowCheckbox [lvRowData]="item"></td>
          <td>{{ item.site }}</td>
          <td>{{ item.type }}</td>
          <td *ngIf="belong === 'target'" width="80px"><a (click)="remove(item)">delete</a></td>
        </tr>
      </ng-container>
    </tbody>
  </lv-datatable>
</ng-template>


